<template>
      <div id="menulist">
            <page-title>
                  <span slot="pageName">菜单管理</span>
            </page-title>
            <div class="btn">
                        <el-button class="addProject" type="primary" round @click="ShowDialog"  >添加菜单</el-button>
            </div>
            <!-- table -->
            <div class="table">
                  <el-table
                  :data="tableData"
                  style="width: 100%">
                        <el-table-column
                              label="菜单ID"
                              align="center"
                              width="180">
                              <template slot-scope="scope">
                              <i class="el-icon-user"></i>
                              <span style="margin-left: 10px">{{ scope.row.id }}</span>
                              </template>
                        </el-table-column>
                        <el-table-column
                              label="菜单路由"
                              align="center"
                              >
                              <template slot-scope="scope">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                              </template>
                        </el-table-column>
                        <el-table-column
                              label="菜单名称"
                              align="center"
                              >
                              <template slot-scope="scope">
                              
                                    <el-tag size="medium">{{ scope.row.title }}</el-tag>

                              </template>
                        </el-table-column>
                        <el-table-column
                              label="菜单图标"
                              align="center"
                              >
                              <template slot-scope="scope">
                              
                                    <el-tag size="medium">{{ scope.row.pic }}</el-tag>

                              </template>
                        </el-table-column>
                        <el-table-column
                              label="菜单状态"
                              align="center"
                             >
                              <template slot-scope="scope">
                              
                                    <el-button  size="mini" :disabled="scope.row.id == 1" :type="scope.row.status == 1 ? 'success' : 'danger' " @click="ChangeStatus( scope.row )">{{ scope.row.status == 1 ? " 显示" : "隐藏" }}</el-button>

                              </template>
                        </el-table-column>
                        <el-table-column label="操作">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="primary"
                                    @click="MenuEdit(scope.row)">编辑</el-button>
                              </template>
                        </el-table-column>
                  </el-table>
            </div>

            <menu-dialog :DialogData="DialogData" :FormData="FormData" @update="getMenuList"></menu-dialog>
      </div>
</template>

<script>
      import PageTitle from "@/components/PageTitle"
      import MenuDialog from "@/components/dialog/MenuDialog"
      export default {
            components: {
                  PageTitle,
                  MenuDialog,
            },
            data() {
                  return {
                        tableData: [],
                        DialogData: {
                              show: false,
                              title: "添加菜单"
                        },
                        FormData: {
                              name: "",
                              title: "",
                              pic: "",
                              state: ""
                        },
                  }
            },
            computed: {
                  token() {
                        return localStorage.miniToken;
                  }
            },
            mounted() {
                  this.getMenuList()
            },
            methods: {
                  // 显示dialog
                  ShowDialog() {
                        this.DialogData = {
                              title: "添加菜单",
                              show: true,
                              add: true,
                              edit: false
                        }
                        this.FormData = {
                              name: "",
                              title: "",
                              pic: "",
                              status: "",
                        }
                  },
                  // 获取导航按钮
                  async getMenuList() {
                        let res = await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                        // console.log(res);
                        this.tableData = res.data.data
                  },
                  // 编辑菜单
                  MenuEdit( row ) {
                        this.DialogData = {
                              title: "编辑菜单",
                              show: true,
                              add: false,
                              edit: true
                        }
                        this.FormData = {
                              name: row.name,
                              title: row.title,
                              pic: row.pic,
                              status: row.state,
                              id: row.id
                        }
                  },
                  // 菜单状态改变
                  async ChangeStatus( row ) {
                        let res = await this.$axios.post("/admin/role/menu_module_change",{
                              token: this.token,
                              id: row.id
                        })
                        //console.log(res);
                        if (res.data.code == 204) {
                              this.$message.success("更新成功!")
                              this.getMenuList()
                        }
                  },
            }
      }
</script>

<style lang="scss" scoped>
.btn {
        text-align: left;
        margin-top: 30px;
  }
.addProject {
        float: right;
        margin: 10px 20px;
  }
</style>